import 'package:flutter/material.dart';
import 'package:ideology/features/models/editor_tab.dart';
import 'package:ideology/features/screens/code_editor_controller.dart';

/// 编辑器顶部的标签栏组件。
///
/// - 显示多个 [EditorTab]；
/// - 支持横向滚动，防止 tab 过多溢出；
/// - 当前激活的 tab 高亮显示；
/// - 点击 tab 可切换，点击关闭图标可关闭该 tab。
class TabBarWidget extends StatelessWidget {
  const TabBarWidget({super.key, required this.controller});

  /// 外部注入的编辑器控制器，包含 tab 列表与活动索引。
  final CodeEditorController controller;

  @override
  Widget build(BuildContext context) {
    final cs = Theme.of(context).colorScheme;

    return ValueListenableBuilder<List<EditorTab>>(
      valueListenable: controller.tabs,
      builder: (context, tabs, _) {
        final bool empty = tabs.isEmpty;

        return Container(
          height: 40, // 标签栏高度
          decoration: BoxDecoration(
            color: cs.surfaceContainerHighest, // 背景色
            border: Border(
              top: BorderSide(
                // 顶部分隔线
                color: Theme.of(context).dividerColor.withOpacity(0.35),
                width: 0.6,
              ),
            ),
          ),
          child: empty
              ? Align(alignment: Alignment.centerLeft)
              : SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: [
                const SizedBox(width: 0), // 让 tab 紧密排列
                for (int i = 0; i < tabs.length; i++)
                  _buildTabItem(tabs[i], i, context),
              ],
            ),
          ),
        );
      },
    );
  }

  /// 构建单个 tab 条目。
  Widget _buildTabItem(EditorTab tab, int index, BuildContext context) {
    return ValueListenableBuilder<int>(
      valueListenable: controller.activeTabIndex,
      builder: (context, active, _) {
        final bool selected = index == active;
        final cs = Theme.of(context).colorScheme;

        return InkWell(
          onTap: () => controller.setActiveTab(index),
          child: AnimatedContainer(
            duration: const Duration(milliseconds: 300), // 平滑过渡效果
            height: 40,
            padding: const EdgeInsets.symmetric(horizontal: 16),
            decoration: BoxDecoration(
              // 激活状态背景
              color: selected ? cs.primary.withOpacity(0.1) : cs.surface,
              border: Border(
                // 底部高亮边框
                bottom: BorderSide(
                  color: selected
                      ? cs.primary.withOpacity(0.5)
                      : cs.outline.withOpacity(0.4),
                  width: selected ? 2.0 : 1.0,
                ),
              ),
            ),
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // Tab 标题，鼠标悬停时显示完整路径
                Tooltip(
                  message: tab.relativePath,
                  child: Text(
                    tab.title,
                    overflow: TextOverflow.fade,
                    softWrap: false,
                    style: TextStyle(
                      fontSize: 14,
                      fontWeight: selected ? FontWeight.w600 : FontWeight.w500,
                    ),
                  ),
                ),
                const SizedBox(width: 10),
                // 关闭按钮
                GestureDetector(
                  onTap: () => controller.closeTabAt(index),
                  child: Icon(
                    Icons.close,
                    size: 18,
                    color: selected
                        ? cs.primary
                        : cs.onSurface.withOpacity(0.6),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
